<template>
    <div style="margin-bottom: 16px;" :class="columns?'columns':'row'">
        <p class="labelInput" :style="`width:${labelWidth}px`"> <i class="require" v-if="Boolean(requires)">*</i> {{ label }}</p>
        <slot></slot>
    </div>
</template>

<script>
export default{
    props:{
        label:{
            type:String,
            default:'',
        },
        requires:{
            type:[Boolean,Number,String],
            default:false,
        },
        columns:{
            type:Boolean,
            default:false,
        },
        labelWidth:{
            type:Number,
            default:80,
        }
    }
}
</script>

<style lang="scss" scoped>
.labelInput{
    font-size: 14px;
    color: #414A60;
    position: relative;
    
    line-height: 1.5;
    display: inline-block;
    width: 80px;
    // font-weight: 600;
    .require{
        color: #D0021B;
        font-size: 14px;
        // position: absolute;
    }
}
.columns{
    display: flex;
    flex-direction: column;
    .labelInput{
        margin: 0;
        margin-bottom: 8px;
        width: 100% !important;
    }
    // &>p{
    //     line-height: 1.5;
    // }
}
.row{
    display: flex;
    align-items: center;
    &>p{
        margin-right: 12px;
    }
}
</style>